<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/public.jsp" %>
<%@include file="/WEB-INF/jsp/index/model.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <title>管理</title>
    <!--IE 使用最高版本-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script>
        $(function(){
            $("#node_1").trigger("click");
        });

        function addData(isAdd){
            var flag = $("#addBtn").attr("data");
            if (flag==1){
                var name;
                var uuid;
                if (isAdd){
                    name = $('#myModal_1').find("input[name='name']").val();
                }else {
                    name = $('#myModal_3').find("input[name='name']").val();
                    uuid = $('#myModal_3').find("input[name='uuid']").val();
                }
                $.ajax({
                    type : "post",
                    url : ctx+"/addOrEditData",
                    async : false,//同步请求
                    data:{flag:1,name:name,isAdd:isAdd,uuid:uuid},
                    dataType:"text",
                    success : function(data){
                        if (isAdd){
                            $('#myModal_1').modal('hide');
                        }else {
                            $('#myModal_3').modal('hide');
                        }
                        $("#node_1").trigger("click");
                    },
                    error : function(e){
                        badMood("操作失败！");
                    }
                });

            }else if (flag==2){
                var ip;
                var port;
                var cluster;
                var uuid;
                if (isAdd){
                    ip = $('#myModal_2').find("input[name='ip']").val();
                    port = $('#myModal_2').find("input[name='port']").val();
                    cluster = $('#myModal_2').find("select[name='cluster']").val();
                }else {
                    uuid = $('#myModal_4').find("input[name='uuid']").val();
                    ip = $('#myModal_4').find("input[name='ip']").val();
                    port = $('#myModal_4').find("input[name='port']").val();
                    cluster = $('#myModal_4').find("select[name='cluster']").val();
                }
                $.ajax({
                    type : "post",
                    url : ctx+"/addOrEditData",
                    async : false,//同步请求
                    data:{flag:2,ip:ip,port:port,cluster:cluster,isAdd:isAdd,uuid:uuid},
                    dataType:"text",
                    success : function(data){
                        if (isAdd){
                            $('#myModal_2').modal('hide');
                        }else {
                            $('#myModal_4').modal('hide');
                        }
                        $("#node_2").trigger("click");
                    },
                    error : function(e){
                        badMood("操作失败！");
                    }
                });
            }
        }
        function delData(type,uuid){
            $.ajax({
                type : "post",
                url : ctx+"/delData",
                async : false,//同步请求
                data:{flag:type,uuid:uuid},
                dataType:"text",
                success : function(data){
                    if (type==1){
                        if (data=="false"){
                            badMood("集群中有节点，不允许删除！");
                        }else {
                            $("#node_1").trigger("click");
                        }
                    }else if (type==2){
                        $("#node_2").trigger("click");
                    }
                },
                error : function(e){
                    alert("操作失败！");
                    badMood("操作失败！");
                }
            });
        }
        function editData(type,uuid){
            var obj;
            $.ajax({
                type : "post",
                url : ctx+"/getData",
                async : false,//同步请求
                data:{type:type,uuid:uuid},
                dataType:"json",
                success : function(data){
                    obj = data;
                }
            });
            if (type==1){
                $('#myModal_3').find("input[name='uuid']").val(obj.uuid);
                $('#myModal_3').find("input[name='name']").val(obj.name);
                $('#myModal_3').modal('show');
            }else if (type){
                $('#myModal_4').find("input[name='uuid']").val(obj.uuid);
                $('#myModal_4').find("input[name='ip']").val(obj.ip);
                $('#myModal_4').find("input[name='port']").val(obj.port);
                $.ajax({
                    type : "post",
                    url : ctx+"/clusterData",
                    async : false,//同步请求
                    dataType:"json",
                    success : function(data){
                        var html = "";
                        for (var i=0;i<data.length;i++){
                            if (data[i].uuid==obj.cluster_id){
                                html += '<option value="'+data[i].uuid+'" selected>'+data[i].name+'</option>';
                            }else {
                                html += '<option value="'+data[i].uuid+'">'+data[i].name+'</option>';
                            }
                        }
                        $('#myModal_4').find("select[name='cluster']").html(html);
                    }
                });
                $('#myModal_4').modal('show');
            }
        }


        function delServer(clusterId,uuid){
            $.ajax({
                type : "post",
                url : ctx+"/delData",
                async : false,//同步请求
                data:{flag:2,uuid:uuid},
                dataType:"text",
                success : function(data){
                    viewData(null,clusterId);
                },
                error : function(e){
                    alert("操作失败！");
                    badMood("操作失败！");
                }
            });
        }


        function viewData(who,uuid){
            var count;
            if(who!=null){
                count = $(who).parent().prev().html();
                var title = $(who).parent().prev().prev().html();
                $("#myModalLabel_5").html("["+title+"] 节点查看");
            }
            if (count==0){
                badMood("集群节点为 0 ！");
            }else {
                $.ajax({
                    type : "post",
                    url : ctx+"/getServerByClusterId",
                    async : false,//同步请求
                    data:{uuid:uuid},
                    dataType:"json",
                    success : function(dataList){
                        $("#serverData").html("");
                        if (dataList.length==0){
                            $('#myModal_5').modal('hide');
                            $("#node_1").trigger("click");
                            return;
                        }else {
                            var html = "";
                            for (var j=0;j<dataList.length;j++){
                                var data = dataList[j];
                                html += '<div class="row" style="margin-top: 20px!important;">';
                                for (var i=0;i<data.length;i++){
                                    html += '<div class="col-md-4">';
                                    html += '<button ondblclick="delServer(';
                                    html +=  "'" +uuid + "'" + "," + "'" +data[i].uuid + "'" + ");" + "\"";
                                    html +=  ' class="btn btn-success">'+data[i].ip+':'+data[i].port+'</button>';
                                    html += '</div>';
                                }
                                html += '</div>';
                            }
                            $("#serverData").html(html);
                            $('#myModal_5').modal('show');
                        }
                    }
                });
            }
        }


        function clusterData(){
            $.ajax({
                type : "post",
                url : ctx+"/clusterData",
                async : false,//同步请求
                dataType:"json",
                success : function(data){
                    var html = '<tr><th style="width:5%">序号</th><th>集群名称</th><th>集群大小</th><th>操作</th></tr>';
                    if (data.length==0){
                        html += '<tr><td colspan="4">无数据，请添加。</td></tr>';
                    }else {
                        for (var i=0;i<data.length;i++){
                            html += '<tr><td>'+(i+1)+'</td><td>'+data[i].name+'</td><td>'+data[i].count+'</td>';
                            html += '<td><button class="btn btn-sm btn-danger" onclick="delData(1,\''+data[i].uuid+'\')">删除</button>&nbsp;&nbsp;&nbsp;' +
                                    '<button class="btn btn-sm btn-info" onclick="editData(1,\''+data[i].uuid+'\')">修改</button>&nbsp;&nbsp;&nbsp;' +
                                    '<button class="btn btn-sm btn-success" onclick="viewData(this,\''+data[i].uuid+'\')">查看</button></td>';
                            html += '</tr>';
                        }
                    }
                    $("#table").html(html);
                }
            });
            $("#addBtn").attr("data",1);
            $("#addBtn").attr("data-target","#myModal_1");
        }


        function serverData(){
            $.ajax({
                type : "post",
                url : ctx+"/serverData",
                async : false,//同步请求
                dataType:"json",
                success : function(data){
                    var html = '<tr><th style="width:5%">序号</th><th>服务IP</th><th>服务端口</th><th>操作</th></tr>';
                    if (data.length==0){
                        html += '<tr><td colspan="4">无数据，请添加。</td></tr>';
                    }else {
                        for (var i=0;i<data.length;i++){
                            html += '<tr><td>'+(i+1)+'</td><td>'+data[i].ip+'</td><td>'+data[i].port+'</td>';
                            html += '<td><button class="btn btn-sm btn-danger" onclick="delData(2,\''+data[i].uuid+'\')">删除</button>&nbsp;&nbsp;&nbsp;' +
                                    '<button class="btn btn-sm btn-info" onclick="editData(2,\''+data[i].uuid+'\')">修改</button>';
                            html += '</tr>';
                        }
                    }
                    $("#table").html(html);
                }
            });
            $("#addBtn").attr("data",2);
            $("#addBtn").attr("data-target","#myModal_2");
        }


    </script>
</head>
<body>
    <div class="container">
        <div class="row" style="margin-top: 50px;">
            <div>
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" onclick="clusterData();" class="active" id="node_1"><a href="#" role="tab" data-toggle="tab">集群管理</a></li>
                    <li role="presentation" onclick="serverData();" id="node_2"><a href="#" role="tab" data-toggle="tab">节点管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="panel panel-success">
                <div class="panel-heading" role="tab" id="heading" href="#collapse2" data-toggle="collapse" aria-expanded="true" aria-controls="collapse">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse"
                           aria-expanded="true" aria-controls="collapse">
                            列表
                        </a>
                        <button data-toggle="modal" data-target="#myModal_1" class="btn btn-success" style="margin-left: 85%" id="addBtn">添加</button>
                        <button class="btn btn-success" onclick="window.location='${ctx}/index'">主页</button>
                    </h4>
                </div>
                <div id="collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading">
                    <table class="table table-striped table-bordered" style="text-align: center" id = "table">
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

